:global {
  .ant-form-item-has-error .dc-text-area-with-extra,
  .ant-form-item-has-error .dc-text-area-with-extra:hover,
  .has-error .dc-text-area-with-extra,
  .has-error .dc-text-area-with-extra:hover {
    .ant-input {
      border-color: #f5222d !important;
    }
    .extra {
      border-color: #f5222d !important;
    }
  }
  .dc-text-area-with-extra {
    .ant-input {
      position: relative;
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 0;
      &:focus {
        border-bottom: none;
        outline: none;
        box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.2);
        & + .extra {
          border-color: #40a9ff;
        }
      }
      &:hover {
        border-color: #e5e5e5;
      }
    }
    .ant-input[disabled] {
      & + .extra {
        color: rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        cursor: not-allowed;
        opacity: 1;
      }
    }
    .extra {
      padding-right: 3px;
      line-height: 2;
      text-align: right;
      border: 1px solid #e5e5e5;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      border-top: none;
      background: #fff;
      transition: all 0.3s, height 0s;
    }
    &:hover {
      .ant-input {
        border-color: #40a9ff !important;
      }
      .extra {
        border-color: #40a9ff !important;
      }
    }
  }
}
